import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {from, of} from 'rxjs';
import {flatMap, filter} from 'rxjs/operators';
import {Tab, Menu} from '../../model/home.model';
import {SimpleReuseStrategy} from './simpleReuseStrategy';
import {Router, ActivatedRoute} from '@angular/router';
import {SysUserService} from '../../service/sys-user.service';
import {SysMenuService} from '../../service/sys-menu.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {

  title = 'sola-front';

  isCollapsed = false;
  // 所有菜单,肯能包含隐藏菜单
  menuAll: Array<any> = [];
  // 所有的可展示菜单
  menus: Menu[] = [];
  // 当前激活的tableIndex
  actIndex = null;
  // 定义路由tab 用于路由复用
  tabs: Tab[] = [];

  constructor(private http: HttpClient, private router: Router,
              private sysUserService: SysUserService, private sysMenuService: SysMenuService) {
    sysMenuService.getSysMenuList().subscribe((res: any) => {
      this.menus = this.getMenuRouter(res.data);
    });
  }


  actMenu(menu: Menu): void {
    // 判断是否存在当前路由table
    const tabToAct: Tab = {tabTitle: menu.name, tabRoute: menu.url};
    // 全量匹配 获取index
    let actTabIndex = this.tabs.findIndex(tab => tab.tabTitle === tabToAct.tabTitle && tab.tabRoute === tabToAct.tabRoute);
    if (actTabIndex < 0) {
      this.tabs.push(tabToAct);
      actTabIndex = this.tabs.length;
    }
    this.actIndex = actTabIndex + 1;

  }

  closeTab(tab: Tab): void {
    // 删除当前tab
    const index = this.tabs.indexOf(tab);
    // 关闭当前打开的tab时
    if (this.actIndex === index + 1) {
      if (this.tabs.length === 1) {
        // 移除tab
        this.tabs.splice(index, 1);
        // 移除路由缓存
        SimpleReuseStrategy.remove(tab.tabRoute);
        this.navigateWelcome();
      } else {
        // 移除tab
        this.tabs.splice(index, 1);
        // 移除路由缓存
        SimpleReuseStrategy.remove(tab.tabRoute);

        const actTab = this.tabs[index === 0 ? 0 : index - 1];
        // 激活一个tab
        this.actIndex = index === 0 ? 1 : index;

        this.router.navigateByUrl('home/' + actTab.tabRoute);

      }
    } else {
      // 移除tab
      this.tabs.splice(index, 1);
      // 移除路由缓存
      SimpleReuseStrategy.remove(tab.tabRoute);
    }


  }

  navigate(tab: Tab) {
    // 转跳路由
    this.router.navigateByUrl('home/' + tab.tabRoute);
  }

  navigateWelcome() {
    // 转跳路由
    this.router.navigateByUrl('home/welcome');
  }

  /**
   * @param {Array} list 通过路由列表得到菜单列表
   * @returns {Array}
   */
  getMenuRouter(list: Array<any>): Array<any> {
    const res = [];
    list.map((item: any) => {
      if (item.type === 0) {
        const obj: Menu = {
          icon: item.icon || '',
          name: item.name,
          url: item.url,
          children: [],
          type: 0,
          selected: false
        };
        if (item.children && item.children.length !== 0) {
          obj.children = this.getMenuRouter(item.children);
        }
        res.push(obj);
      }
    });
    return res;
  }

  ngOnInit(): void {
    // 转跳路由
    this.router.navigateByUrl('home/welcome');
  }

}
